<template>
  <div class="app-container d-flex">
    <div class="h-6 w-9 d-flex flex-wrap">
      <!--  -->
      <div class="h-2 width-33 p10" v-for="(item,index) in oneCardData" :key="index">
        <div class="h-100 w-100 item_border pl-2 pr-2">
          <div class="height-20 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="status_point" :class="dataCardBgColor[oneCardStatusData[index].socketColor]"></div>
                <div class="font-14">{{oneCardDataTitle[index]}}</div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="allControl" @click="setStatusByDevice(oneCardStatusData[index], 1)">控制</div>
            </div>
          </div>
          <div class="height-80 d-flex flex-column flex-wrap">
            <div class="height-33 w-50" v-for="(itemY,indexY) in item.deviceList" :key="indexY"
                 :class="oneCardDataBg[indexY].class">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2" :class="oneCardDataBg[indexY].bgColor">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="oneCardDataBg[indexY].url" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{itemY.deviceValue}}</div>
                  <div class="content_unit font-12">{{oneCardDataBg[indexY].unit}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-6 w-3">
      <!-- 宿舍区1-3号楼负载对比 -->
      <div class="h-2 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区1-3号楼负载对比</div>
            </div>
          </div>
          <div class="item_content" id="bar_first"></div>
        </div>
      </div>
      <!-- 宿舍区实时故障 -->
      <div class="h-4 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区实时故障</div>
            </div>
          </div>
          <div class="d-flex flex-column item_content font-white font-12">
            <div v-show="deviceGz.length==0" class="w-100 h-100">
              <div class="w-100 h-100 d-flex flex-column justify-content-between">
                <div class="h-50">
                  <el-image class="w-100 h-100" :src="jlt" fit="contain"></el-image>
                </div>
                <div class="height-47">
                  <div class="h-100 w-100 border-success-top d-flex flex-column justify-content-between p-3">
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>洗衣机</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>空调</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>照明</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>应急灯</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>总开关</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="deviceGz.length>0" class="h-100 w-100">
               <div v-if="deviceGzObj.deviceName" class="height-30 mb-3 clearLastMb border-danger">
                <div class="h-2 bg_danger d-flex align-items-center justify-content-between pl-3 pr-3">
                  <div class="font-20">{{deviceGzObj.faultReason}}</div>
                  <div class="">{{deviceGzObj.faultTime}}</div>
                </div>
                <div class="h-4 w-100 mb-3 d-flex flex-column justify-content-around pl-3 pr-3 pt-1 pb-1">
                  <div class="d-flex-center-jb">
                    <div class="d-flex align-items-center">
                      <div>设备名称：</div>
                    </div>
                    <div>{{deviceGzObj.deviceName}}</div>
                  </div>
                  <div class="d-flex-center-jb">
                    <div class="d-flex align-items-center">
                      <div>设备位置：</div>
                    </div>
                    <div>{{deviceGzObj.deviceLocation}}</div>
                  </div>
                </div>
              </div>
              <div class="height-67 w-100 over-auto-y" ref="table_one">
                <div class="height-48 mb-3 clearLastMb border-danger" v-for="(item,index) in deviceGz" :key="index">
                  <div class="h-2 bg_danger d-flex align-items-center justify-content-between pl-3 pr-3">
                    <div class="font-20">{{item.faultReason}}</div>
                    <div class="">{{item.faultTime}}</div>
                  </div>
                  <div class="h-4 w-100 mb-3 d-flex flex-column justify-content-around pl-3 pr-3 pt-1 pb-1">
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div>设备名称：</div>
                      </div>
                      <div>{{item.deviceName}}</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div>设备位置：</div>
                      </div>
                      <div>{{item.deviceLocation}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListWorkingByNum,
    queryOneListWorkingByStatus,
    setStatusByDevice,
    queryTwoListWorkingByReport,
    queryDeviceWorkingFaultList,
  } from "@/api/electrician/collect/operationMonitor"
  import { makeDeviceControl } from "@/api/dormOneBuildingOneFloor/electricityManagement";

  export default {
    components: {},
    data() {
      return {
        timeout: [],
        value: true,
        jlt: require('@/assets/img/jlt.png'),
        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],
        oneCardData: [],
        oneCardDataTitle: ['1号楼东区总开1', '1号楼东区总开2', '1号楼西区总开', '2号楼东区总开1', '2号楼东区总开2', '2号楼西区总开', '3号楼东区总开', '3号楼西区总开'],
        oneCardDataBg: [
          {url: require('@/assets/img/icon_A.png'), bgColor: 'border-warning-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_B.png'), bgColor: 'border-success-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'V', class: 'pt-1 pr-2 pb-2'},
          {url: require('@/assets/img/icon_A.png'), bgColor: 'border-warning-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_B.png'), bgColor: 'border-success-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
          {url: require('@/assets/img/icon_C.png'), bgColor: 'border-danger-top', unit: 'A', class: 'pt-1 pl-2 pb-2'},
        ],
        oneCardStatusData: [],

        twoCardData: {
          xData: [],
          seriesData1: []
        },

        deviceGz: [],
        deviceGzObj: {},
      }
    },
    created() {

    },
    mounted() {
      this.queryOneListWorkingByNum()
      this.queryOneListWorkingByStatus()
      this.queryTwoListWorkingByReport()
      this.queryDeviceWorkingFaultList()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListWorkingByNum()
        _this.queryTwoListWorkingByReport()
        _this.queryDeviceWorkingFaultList()
      }, 30000);

      this.timeout[1] = setInterval(() => {
        _this.queryOneListWorkingByStatus()
      }, 15000);

      this.infinitScroll("table_one")
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListWorkingByNum() {
        queryOneListWorkingByNum().then(res => {
          let tempData = res.object
          this.oneCardData = tempData
        })
      },

      queryOneListWorkingByStatus() {
        queryOneListWorkingByStatus().then(res => {
          let tempData = res.object
          this.oneCardStatusData = tempData
        })
      },

      queryTwoListWorkingByReport() {
        queryTwoListWorkingByReport().then(res => {
          let tempData = res.object || []
          let xData = []
          let seriesData1 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)
            let obj = {
              value: parseFloat(tempData[i].yValue),
              itemStyle: {
                color: i == 0 ? '#FED52F' : i == 1 ? '#1ac15d' : '#26BDE8'
              }
            }
            seriesData1.push(obj)
          }

          this.twoCardData.xData = xData
          this.twoCardData.seriesData1 = seriesData1
          charts.barEchart('bar_first', this.twoCardData)
        })
      },


      async queryDeviceWorkingFaultList() {
        await queryDeviceWorkingFaultList().then(res => {
          let tempData = res.object || []
          if (tempData.length > 1) {
            this.deviceGzObj = tempData[0]
            this.deviceGz = tempData.slice(1, tempData.length)
          } else {
            this.deviceGz = tempData
          }
        })
      },

      setStatusByDevice(data, type) {
        let confirmMessageMap = ""
        let deviceValue = data.deviceList[data.deviceList.length - 2].deviceValue
        confirmMessageMap = deviceValue == '0' ? "确定执行合闸操作吗, 是否继续?" : "确定执行分闸操作吗, 是否继续?"

        let obj = {}

        if (deviceValue == '0') {
          obj = {
            command: '65365',
            commandName: '合闸',
            parameterCode: 'CTRL',
          }
        } else {
          obj = {
            command: '65280',
            commandName: '分闸',
            parameterCode: 'CTRL',
          }
        }
        this.$confirm(confirmMessageMap, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          makeDeviceControl({
            deviceCode: data.deviceCode,
            parameterCode: obj.parameterCode,
            command: obj.command,
            commandName: obj.commandName,
          }).then(res => {
            if (res.status == '200' && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {

              setTimeout(() => {
                this.loading = false

                this.queryOneListWorkingByStatus()

                this.$message({
                  type: 'success',
                  message: res.message
                });
              }, 2000)
            } else {
              this.loading = false
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },

      infinitScroll(name) {
        const table = this.$refs[name]
        table.onmouseover = function () {
          clearInterval(t)
        }
        table.onmouseout = function () {
          start()
        }
        let t

        function start() {
          t = setInterval(() => {
            table.scrollTop += 1
            if (table.scrollHeight - (table.clientHeight + table.scrollTop) < 1) {
              table.scrollTop = 0
            }
          }, 30)
        }

        start()
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-80 {
    height: 80%;
  }

  .height-67 {
    height: 67%;
  }

  .height-48 {
    height: 47%;
  }

  .height-33 {
    height: 33.33%;
  }

  .height-30 {
    height: 31%;
  }

  .height-20 {
    height: 20%;
  }

  .width-33 {
    width: 33.33%;
  }

  .border-danger-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #df547b inset;
  }

  .border-success-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(7, 193, 96, 0.83) inset;
  }

  .border-warning-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(254, 213, 47, 0.83) inset;
  }

  .content_value {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 4px;
  }

  .clearLastMb:last-child {
    margin-bottom: 0 !important;
  }

  .border-danger {
    background: rgba(3, 24, 29, 0.34);
    border: 1px solid #f31e1e;
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #f31e1e inset;
  }

  .img_size_31 {
    width: 31px;
    height: 31px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .status_point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 2px;
  }

  .item_bg_open {
    background-color: #1AA652;
  }

  .item_bg_danger {
    background-color: #df547b;
  }

  .item_bg_close {
    background-color: #7A7A7A;
  }

  .item_bg_blue {
    background: #2C637A;
  }

  .item_bg_warning {
    background: #B3A12F;
  }

  .bg-index-red {
    background: #AF1F1F;
  }
</style>
